<template>
  <common-card title="累计用户数" :value="numberFormat(usersTotal)">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="footer">
        <span>日同比</span>
        <span class="emphasis">{{ userGrowthLastDay }}</span>
        <span class="increment"></span>
        <span style="margin-left: 10px">月同比</span>
        <span class="emphasis">{{ userGrowthLastMonth }}</span>
        <span class="decrement"></span>
      </div>
    </template>
  </common-card>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "TotalUsers",
  components: { CommonCard },
}
</script>
<script lang="ts" setup>
import { ref, onMounted, computed, watch } from "vue"
import * as echarts from "echarts"
import type { EChartsType } from "echarts"
import useFormat from "@/hooks/useFormat"
import { useReportDataStore } from "@/stores/reportData"
const { numberFormat, moneyFormat } = useFormat()
const reportDataStore = useReportDataStore()
const usersTotal = computed(() => reportDataStore.reportData.usersTotal)
const usersLastMonth = computed(() => reportDataStore.reportData.usersLastMonth)
const userGrowthLastDay = computed(
  () => reportDataStore.reportData.userGrowthLastDay
)
const userGrowthLastMonth = computed(
  () => reportDataStore.reportData.userGrowthLastMonth
)

const barChartRef = ref()
let myTotalUsers: EChartsType

const myTotalUsersChart = () => {
  return {
    xAxis: {
      show: false, // 不显示y轴及其标线
      boundaryGap: false, // 两边不留空白
      // x轴数据
      // data: [
      //   "1月",
      //   "2月",
      //   "3月",
      //   "4月",
      //   "5月",
      //   "6月",
      //   "7月",
      //   "8月",
      //   "9月",
      //   "10月",
      //   "11月",
      //   "12月",
      // ],
      min: 0,
      max: 100,
    },
    yAxis: {
      show: false, // 不显示y轴及其标线
      data: ["1月"],
    },
    series: [
      {
        name: "实时订单数据",
        type: "bar",
        // 列表数据
        data: [44],
        barWidth: 10, // 设置柱条的宽度
        // 设置标签字体样式
        label: {
          show: true,
          formatter: "||",
          position: "right",
        },
        showBackground: true, // 显示柱条的背景颜色
        // 柱条的颜色
        itemStyle: {
          color: "pink",
        },
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 显示提示
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}

// 页面挂载完毕的时候要执行
onMounted(() => {
  myTotalUsers = echarts.init(barChartRef.value)
  myTotalUsers.setOption(myTotalUsersChart())

  // 当页面尺寸变化的时候，也需要变化
  window.addEventListener("resize", () => {
    myTotalUsers && myTotalUsers.resize()
  })
})
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  align-items: center;
}
</style>
